@media print {
/* 印刷裝置用,通常會關閉動畫 & hover */
}
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
<link rel="stylesheet" type="text/css" href="all.css" media="screen">
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)">
$media-md: 768px;
@mixin media-md() {
// 大於 768px 套用
@media all and (min-width: $media-md) {
@content;
}
}
// 可以寫於元件之下
.test {
@include media-md{
border: 1px solid red;
};
}
// 亦可統一管理同一個條件下的樣式
@include media-md{
.test2 {
background-color: green;
}
};
$media-md: 768px;
$media-xs: 576px;
@mixin media-bp-up($width) {
@media all and (min-width: $width) {
@content;
}
}
@mixin media-bp-down($width) {
@media all and (max-width: $width) {
@content;
}
}
@mixin media-bp-between($min-w,$max-w) {
@media all and (min-width: $min-w) and (max-width: $max-w){
@content;
}
}
// 可寫於元件之下
.test {
// 大於 768px
@include media-bp-up($media-md){
color: red;
};
// 小於 768px
@include media-bp-down($media-md){
border: 1px solid blue;
};
// xs(576) & md(768) 之間
@include media-bp-between($media-xs,$media-md){
background-color: #eee;
};
}
// 亦可統一管理同一個條件下的樣式
@include media-bp-down($media-md){
.test2 {
background-color: green;
}
};
CodePenPlayGround
CSS Media Queries 詳細介紹
[CSS] Media Query
MDN